<!-- 文章列表 -->
<template>
  <el-row class="sharelistBox">

    <el-col :span="24" class="s-item tcommonBox" v-for="(item,index) in articleList" :key="'article'+index">
      <!--            <span class="s-round-date">-->
      <!--                <span class="month" v-html="showInitDate(item.createTime,'month')+'月'"></span>-->
      <!--                <span class="day" v-html="showInitDate(item.createTime,'date')"></span>-->
      <!--            </span>-->
      <el-row :gutter="28">
        <el-col :span="10" style="overflow: hidden">
          <img v-if="item.thumbnail" @error="setDefaultImage" :title="item.title" @click="toDetail(item.id)"
               :src="item.thumbnail" alt=""
               class="article-img">
          <img v-else :title="item.title" @click="toDetail(item.id)"
               src="../assets/notfound.png" alt=""
               class="article-img">
        </el-col>
        <el-col :span="14">
                <span v-if="item.isTop==1" class="top-icon">
              <i><svg style="width: 15px;height: 14px" t="1685690229833" class="icon" viewBox="0 0 1024 1024"
                      version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14988" width="200" height="200"><path
                d="M256 128a42.666667 42.666667 0 0 0 0 85.333333h512a42.666667 42.666667 0 0 0 0-85.333333H256z m256 205.994667L291.328 554.666667H426.666667v128a42.666667 42.666667 0 1 1-85.333334 0v-42.666667H291.328c-75.989333 0-114.090667-91.904-60.330667-145.664l220.672-220.672a85.333333 85.333333 0 0 1 120.661334 0l220.672 220.672c53.76 53.76 15.658667 145.664-60.330667 145.664H682.666667v213.333333a85.333333 85.333333 0 0 1-85.333334 85.333334h-170.666666a85.333333 85.333333 0 0 1-85.333334-85.333334 42.666667 42.666667 0 1 1 85.333334 0h170.666666v-298.666666H732.672L512 333.994667z"
                fill="#14101C" p-id="14989"></path></svg>置顶</i>
            </span>
          <header>
            <h1 style="text-align: left">
              <a :href="'#/Share?classId='+item.categoryId" class="category-box">{{ item.categoryName }}<i class="label-arrow"></i></a>
              <a class="articleTitle" :href="'#/DetailArticle?aid='+item.id">
                &nbsp;&nbsp;{{ item.title }}
              </a>
            </h1>
            <h2>
              <i class="fa fa-fw fa-user-circle"></i>ZLW •
              <i class="fa fa-fw fa-calendar"></i><span
              v-html="showInitDate(item.createTime,'all')">{{ showInitDate(item.createTime, 'all') }}</span> •
              <i class="fa fa-fw fa-eye"></i> {{ item.viewCount }} •
              <i class="fa fa-fw fa-thumbs-up"></i> {{ item.likeCount }} •
              <!--          <i class="fa fa-fw fa-qrcode"></i>-->
              <!--          <el-tag type="warning" class="el-tag&#45;&#45;small">{{ item.categoryName }}</el-tag>-->
              <!--          •-->
              <span v-show="item.tags!==0">
          <i class="fa fa-fw fa-tag"></i>
          <span v-for="(tag,index) in item.tags">
            <el-tag v-if="index == 0" type="primary" class="el-tag--small">{{ tag }}</el-tag>
            <el-tag v-else-if="index == 1" type="success" class="el-tag--small">{{ tag }}</el-tag>
            <el-tag v-else class="el-tag--small">{{ tag }}</el-tag>
          </span>
          </span>
            </h2>
            <!--        <div class="ui label">-->
            <!--          &lt;!&ndash;          <a :href="'#/Share?classId='+item.class_id">{{ item.categoryName }}</a>&ndash;&gt;-->
            <!--          <a href="javascript:;">{{ item.categoryName }}</a>-->
            <!--        </div>-->
          </header>
          <div class="article-content">
            <p>
              {{ item.summary }}
            </p>
          </div>
        </el-col>
      </el-row>

      <!--      <div class="viewdetail">-->
      <!--        <a class="tcolors-bg" :href="'#/DetailArticle?aid='+item.id" target="_blank">-->
      <!--          阅读全文>>-->
      <!--        </a>-->
      <!--      </div>-->

    </el-col>
    <el-col class="viewmore">
      <!--      <a v-show="hasMore" class="tcolors-bg" href="javascript:void(0);" @click="addMoreFun">点击加载更多</a>-->
      <!--      <a v-show="!hasMore" class="tcolors-bg" href="javascript:void(0);">暂无更多数据</a>-->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :current-page.sync="queryParams.pageNum"
        @current-change="getList"
        @size-change="getList">
      </el-pagination>
    </el-col>
  </el-row>
</template>

<script>
import {initDate} from '../utils/server.js'
import {articleList} from '../api/article'
import {setDefaultImage} from "../utils/common";
import {ai} from "../api/ai";

export default {
  name: 'Share',
  data() { //选项 / 数据
    return {
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        categoryId: "",
        // 标签Id
        paramsId: "",

      },
      total: 0,
      articleList: [],
      hasMore: true,
    }
  },

  methods: {
    setDefaultImage,
    toDetail(id) {
      // 路由跳转新标签页
      const href = this.$router.resolve({
        path: '/DetailArticle?aid=' + id,
      }).href;
      console.log(href)
      window.open(href, '_self')
    },
    //事件处理器
    showInitDate: function (oldDate, full) {
      return initDate(oldDate, full)
    },
    getList() {
      const loading = this.$loading({});
      articleList(this.queryParams).then((response) => {
        this.total = response.total
        this.articleList = response.rows
        // 滚动条回到顶部
        document.body.scrollIntoView()
        this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
          loading.close();
        });
        // this.articleList = this.articleList.concat(response.rows)
          // if (response.total <= this.articleList.length) {
          //   this.hasMore = false
          // } else {
          //   this.hasMore = true
          //   this.queryParams.pageNum++
          // }
      }).catch(()=>{
        this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
          loading.close();
        });
      })
    },
    showSearchShowList: function (initData) {//展示数据
      if (initData) {
        this.articleList = []

      }
      this.getList()
    },
    addMoreFun: function () {//查看更多
      this.showSearchShowList(false);
    },
    routeChange: function () {
      var that = this;
      this.queryParams.categoryId = (that.$route.query.classId == undefined ? null : that.$route.query.classId);//获取传参的classId
      this.queryParams.paramsId = (that.$route.query.paramsId == undefined ? null : that.$route.query.paramsId)
      this.queryParams.pageNum = 1
      this.showSearchShowList(true);
    }
  },
  components: { //定义组件

  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    '$route': 'routeChange',
    '$store.state.keywords': 'routeChange'
  },
  created() { //生命周期函数
    // console.log(this.$route);
    var that = this;
    that.routeChange();
    this.getTopList()

  }
}
</script>

<style>
.label-arrow{
  position: absolute;
  top: 20px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #00a2ff;
  content: "";
  vertical-align: top;
  border-left: 6px solid rgb(101,111,146) !important;
}

.category-box {
  border-radius: 2px;
  font-size: 15px;
  float: left;
  color: #fff;
  background: rgb(101,111,146) !important;;
  /*background-size: 25px;*/
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-delay: 0s;
  transition-property: all;
  white-space: nowrap;
  vertical-align: baseline;
}

.article-img {
  height: inherit;
  width: 100%;
  transition: transform 0.5s ease;
}

.article-img:hover {
  transform: scale(1.2);
}

.articleTitle:hover {
  color: rgb(73, 177, 245);
}

.el-tag--small {
  height: 24px;
  padding: 0 8px;
  line-height: 22px;
}

/*分享标题*/
.shareTitle {
  margin-bottom: 40px;
  position: relative;
  border-radius: 5px;
  background: #fff;
  padding: 15px;
}

.shareclassTwo {
  width: 100%;
}

.shareclassTwo li {
  display: inline-block;
}

.shareclassTwo li a {
  display: inline-block;
  padding: 3px 7px;
  margin: 5px 10px;
  color: #fff;
  border-radius: 4px;
  background: #64609E;
  border: 1px solid #64609E;
  transition: transform 0.2s linear;
  -webkit-transition: transform 0.2s linear;
}

.shareclassTwo li a:hover {
  transform: translate(0, -3px);
  -webkit-transform: translate(0, -3px);
}

.shareclassTwo li a.active {
  background: #fff;
  color: #64609E;

}

/*置顶样式*/
.top-icon {
  float: right;
  border: 1px solid rgb(247, 212, 170);
  background-color: rgb(255, 114, 66);
  /*color: rgb(247,212,170);*/
  font-weight: bold;
  line-height: 25px;
  font-family: "华文宋体";
  justify-content: center;
  align-items: center;
  font-size: 15px;
  border-radius: 4px;
}

/*文章列表*/
.sharelistBox {
  transition: all 0.5s ease-out;
  font-size: 15px;
}


/*.sharelistBox .viewmore a:hover,.s-item .viewdetail a:hover{
    background: #48456C;
}*/
</style>
